<template>
    <div class="bz-sub-container" ref="scrollable">
        <div class="bz-progress-demo">
            <ring class="bz-ring-progress" @complete="handle" @change="onChange"></ring>
        </div>

    </div>
</template>

<script>
    import Ring from "./Ring";

    export default {
        name: "RingDemo",
        components: {Ring},
        data() {
            return {};
        },
        methods: {
            handle(e) {
                console.log(`complete`);
            },
            onChange(p){
                console.log(p);
            },
        }
    }
</script>

<style lang="less" scoped>
    .bz-progress-demo {
        height: 6000px;
    }

    .bz-ring-progress {
        top: 200px;
    }
</style>